<template>
  <el-row class="login-row">
    <el-col :span="6" :offset="9">
      <el-card class="box-card" shadow="hover">
        <div slot="header" class="clearfix">
          <div>客户关系管理系统</div>
        </div>
        <el-form :model="loginForm" status-icon :rules="rules" ref="loginForm"
                 label-width="80px" class="demo-loginForm">
          <el-form-item label="用户名" prop="username">
            <el-input type="text" v-model="loginForm.username" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input type="password" v-model="loginForm.password" show-password
                      autocomplete="off">
            </el-input>
          </el-form-item>
          <el-form-item label="验证码" prop="code">
            <el-input v-model="loginForm.code" autocomplete="off" style="width: 58%"></el-input>
            <img :src="captcha" style="width: 42%;height: 40px;float: right;cursor: pointer;" @click="getCaptcha" alt="看不清换一张">
          </el-form-item>
          <div class="login-btn">
            <el-button type="primary" @click="submitForm('loginForm')">登录</el-button>
          </div>
        </el-form>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
  export default {
    data() {
      return {
        loginForm: {
          username: '',
          password: '',
          code: '',
          uuid:null,
        },
        captcha:"",
        rules: {
          username: [
            { required: true, message: '请输入用户名！', trigger: 'blur' },
            {
              max: 11,
              message: '用户名长度11 个字符',
              trigger: 'blur',
            },
          ],
          password: [
            { required: true, message: '请输入密码！', trigger: 'blur' },
            // 正则校验
            {
              min: 6,
              max: 10,
              message: '用户名长度6到10个字符',
              trigger: 'blur',
            },
          ],
          code: [
            { required: true, message: '请输入验证码！', trigger: 'blur' },
          ]
        },
      }
    },
    created(){
      this.getCaptcha();
    },
    methods: {
      //获取验证码
      getCaptcha(){
        this.$axios.get("/api/captcha").then((res)=>{
          if(res.data.code==200){
              this.captcha="data:image/png;base64,"+res.data.data;
              this.loginForm.uuid=res.data.uuid;
          }
        }).catch((err)=>{
          console.log(err);
        });
      },
      //登录
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
             //发送ajax请求
             this.$axios.post("/api/login",this.loginForm)
             .then((res)=>{
                if(res.data.code==200){//登录成功
                    //1.存储登录用户信息
                    this.$store.commit("setToken",res.data.data);
                    //2.友好提示
                    this.$message.success(res.data.msg)
                    //3.跳转首页
                    this.$router.push("/main")
                }else{//登录失败
                    //1.友好提示
                    this.$message.error(res.data.msg)
                }
             }).catch((err)=>{
               console.log(err);
             })
          }
        })
      },
    },
  }
</script>

<style>
  .login-row {
    margin-top: 100px;
    min-width: 800px;
  }
  .login-row .login-btn {
    text-align: center;
  }
</style>